<template>
	<view class="bg-white w100 pb-40" style="border-radius: 40px 40px 0px 0px;">
		<!-- status 1=已接单,2=进行中,3=待支付,4=司机已到达,5=预约单待司机出发,99=已完成-->
		<view class="flexz bb mlr-36 ptb-30" v-if="info.status==1||info.status==4||info.status==5">
			<view>
				<view class="size-40 bold">{{info.status==1||info.status==5?'司机已接单':'司机已到达'}}</view>
				<view class="size-26 mt-6">请准时前往出发地点</view>
			</view>
			<view class="gray-2 ptb-10 plr-30 center" style="border:1rpx solid #999;" @click="cancle(info.status)">取消订单
			</view>
		</view>
		<view class="plr-36 flexz ptb-30 bb" v-if="info.status==99">
			<view>实际费用</view>
			<view class="">
				<view class="" v-if="huoyun">
					<text class="size-40 red">{{info.discount_price}}</text>元
				</view>
				<view class="" v-else>
					<text class="size-40 red">{{info.price}}</text>元
				</view>
				<!-- <view class="size-26 red">
					已优惠7元
				</view> -->
			</view>
			<!-- <view class="">
				费用明细
				<u-icon name="arrow-right" color="#999" size="35"></u-icon>
			</view> -->
		</view>
		<view class="flexz plr-36 pt-40" v-if="info.driver">
			<view class="flex1 flex-middle">
				<view class="img">
					<image :src="$wanlshop.oss('/uploads/staticImage/img/siji.png"')" mode=""></image>
				</view>
				<view class="ml-20">
					<view class="mb-10">
						{{info.driver.nickname}}
					</view>
					<view class="flex_l">
						<u-rate :count="5" v-model="info.driver.score" size="26" active-color="#EE8931"
							inactive-color="#999" :disabled="true"></u-rate>
						<view class="red size-26 ml-20">{{info.driver.score}}分</view>
					</view>
				</view>
			</view>
			<view class="img1">
				<image v-if="info.status==99" @click="tousu" src="/static/img/tousu.png" mode=""></image>
				
				<block v-else>
					<text @click="add(info)" class="margin-right-sm wlIcon-wuuiconxiangjifangda"></text>
					<image @click="call(info.driver.mobile)" :src="$wanlshop.oss('/uploads/staticImage/img/tel.png"')" mode=""></image>
				</block>
			</view>
		</view>
		<view class="pd-36" v-if="info.status==2||(huoyun&&info.status==3)">
			<u-button type="primary" @click="call(info.emergency_info.contact_tel)">紧急联系人</u-button>
		</view>
		<view class="plr-36 flexz img1 mt-20" v-if="info.status==99">
			<image class="mr-30" @click="call('110')" src="/static/img/baojing.png" mode=""></image>
			<view class="u-flex-1 center ptb-23 bg-gray-2 white">订单已完成</view>
		</view>
		<view class="plr-36 pt-30 pb-60 flexz" v-if="info.status==3 && !huoyun">
			<view class="u-flex-1 mr-30 center green bold ptb-20 radius-10" style="border:1rpx solid #00C28E"
				@click="call('110')">一键报警</view>
			<view class="u-flex-1 white center bg-green bold ptb-20 radius-10" style="border:1rpx solid #00C28E"
				@click="pay">立即支付</view>
		</view>
		<view class="plr-36 ptb-40" v-if="info.status=='99'">

			<view class="u-row-around mt-30">
				<text class="bold">整洁</text>
				<u-rate v-if="info.score1" :count="5" v-model="info.score1" active-color="#EE8931" inactive-color="#999"
					:disabled="false" gutter="20" size="40"></u-rate>
				<u-rate v-else :count="5" v-model="score1" active-color="#EE8931" inactive-color="#999"
					:disabled="false" gutter="20" size="40"></u-rate>
				<text class="bold">{{ pin1 }}</text>
			</view>

			<view class="u-row-around mt-30">
				<text class="bold">设备</text>
				<u-rate :count="5" v-if="info.score2" v-model="info.score2" active-color="#EE8931" inactive-color="#999"
					:disabled="false" gutter="20" size="40"></u-rate>
				<u-rate :count="5" v-else v-model="score2" active-color="#EE8931" inactive-color="#999"
					:disabled="false" gutter="20" size="40"></u-rate>
				<text class="bold">{{ pin2 }}</text>
			</view>

			<view class="u-row-around mt-30">
				<text class="bold">服务</text>
				<u-rate :count="5" v-if="info.score3" v-model="info.score3" active-color="#EE8931" inactive-color="#999"
					:disabled="false" gutter="20" size="40"></u-rate>
				<u-rate :count="5" v-else v-model="score3" active-color="#EE8931" inactive-color="#999"
					:disabled="false" gutter="20" size="40"></u-rate>
				<text class="bold">{{ pin3 }}</text>
			</view>

			<view class="u-row-around mt-30">
				<text class="bold">准时</text>
				<u-rate :count="5" v-if="info.score4" v-model="info.score4" active-color="#EE8931" inactive-color="#999"
					:disabled="false" gutter="20" size="40"></u-rate>
				<u-rate :count="5" v-else v-model="score4" active-color="#EE8931" inactive-color="#999"
					:disabled="false" gutter="20" size="40"></u-rate>
				<text class="bold">{{ pin4 }}</text>
			</view>
			<view class="mt-40 mt-30" style="background: #f8f8f8;">
				<textarea name="" v-if="info.remarks" style="margin:10rpx 0;padding: 10rpx;" v-model="info.remarks" placeholder="请输入评价"
					id="" cols="30" rows="10" disabled="true"></textarea>
				<textarea name="" v-else style="margin:10rpx 0;padding: 10rpx;" v-model="remarks" placeholder="请输入评价" id="" cols="30"
					rows="10"></textarea>
				<!-- <u-field type="textarea" class="w100" v-model="messagePin" :auto-height="false" :clearable="false"
				label-width="0" placeholder="请输入评价"></u-field> -->
				<u-button type="primary" v-if="info.comment !=1" @click="comment"
					:disabled="!remarks || !score1 || !score3 || !score4 " style="margin-top:10rpx;">提交评价</u-button>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['info', 'huoyun'], //1=已接单,2=进行中,3=待支付,4=司机已到达,5=预约单待司机出发,99=已完成
		data() {
			return {
				messagePin: '',
				remarks: '',
				score1: '',
				score2: '',
				score3: '',
				score4: '',

			}
		},
		computed: {
			score() {
				return this.info.score || 0
			},
			pin1() {
				if (this.info.score1) {
					return this.info.score1 == '1' ? '非常差' : this.info.score1 == '2' ? '差' : this.info.score1 == '3' ?
						'一般' : this.info.score1 ==
						'4' ? '满意' : '非常满意';
				} else {
					return this.score1 == '1' ? '非常差' : this.score1 == '2' ? '差' : this.score1 == '3' ? '一般' : this
						.score1 ==
						'4' ? '满意' : '非常满意';
				}

			},
			pin2() {
				if (this.info.score2) {
					return this.info.score2 == '1' ? '非常差' : this.info.score2 == '2' ? '差' : this.info.score2 == '3' ?
						'一般' : this.info.score2 ==
						'4' ? '满意' : '非常满意';
				} else {
					return this.score2 == '1' ? '非常差' : this.score2 == '2' ? '差' : this.score2 == '3' ? '一般' : this
						.score2 ==
						'4' ? '满意' : '非常满意';
				}
			},
			pin3() {
				if (this.info.score3) {
					return this.info.score3 == '1' ? '非常差' : this.info.score3 == '2' ? '差' : this.info.score3 == '3' ?
						'一般' : this.info.score3 ==
						'4' ? '满意' : '非常满意';
				} else {
					return this.score3 == '1' ? '非常差' : this.score3 == '2' ? '差' : this.score3 == '3' ? '一般' : this
						.score3 ==
						'4' ? '满意' : '非常满意';
				}
			},
			pin4() {
				if (this.info.score4) {
					return this.info.score4 == '1' ? '非常差' : this.info.score4 == '2' ? '差' : this.info.score4 == '3' ?
						'一般' : this.info.score4 ==
						'4' ? '满意' : '非常满意';
				} else {
					return this.score4 == '1' ? '非常差' : this.score4 == '2' ? '差' : this.score4 == '3' ? '一般' : this
						.score4 ==
						'4' ? '满意' : '非常满意';
				}
			}
		},
		methods: {
			change(e) {
				console.log(e);
			},
			// 1、5 司机已接单  4 司机已到达
			cancle(status) {
				if (this.huoyun) {
					uni.navigateTo({
						url: '/pages/transport/huoyun/cancle-order?id=' + this.info.id
					})
				} else {
					if (status == 1 || status == 5) {
						uni.navigateTo({
							url: '/pages/transport/home/dj-cancel?id=' + this.info.id + '&type=1'
						})
					} else if (status == 4) {
						uni.navigateTo({
							url: '/pages/transport/home/cancel?tel=' + this.info.driver.mobile
						})
					}
				}
			},
			call(tel) {
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
			tousu() {
				let sf_type = this.huoyun ? 2 : ''
				uni.navigateTo({
					url: '/pages/transport/my/complaints/index?id=' + this.info.id + '&sf_type=' + sf_type
				})
			},
			pay() {
				// this.$emit('pay')
				uni.navigateTo({
					url: '/pages/transport/home/detailpay?id=' + this.info.id
				})
			},
			// 评分
			comment() {
				console.log('666');

				this.$http(this.huoyun ? '/addons/ddrive/hyorder/comment' : '/addons/ddrive/order/comment', {
					order_id: this.info.id,
					score1: this.score1,
					score2: this.score2,
					score3: this.score3,
					score4: this.score4,
					remarks: this.remarks
				}, "POST").then(data => {

				})
				uni.navigateBack({
					delta: 1
				});
			},
			add(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/driver/my/equipment/equipment?type=${item.car_type}&order_id=${item.id}&t=user`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.img {
		image {
			width: 90rpx;
			height: 90rpx;
		}
	}

	.img1 {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		image {
			width: 86rpx;
			height: 86rpx;
		}
		text {
			font-size: 86rpx;
			color: #00c28e;
		}
	}
</style>